<!-- 
      enquiry.html
      询价  id=  enquiry
      
      Created by 唐海全 on 2017-03-22.
      Copyright 2017 唐海全. All rights reserved.
 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/mui.picker.min.css" />
	<link rel="stylesheet" href="../css/setting.css" />
</head>
<body class="gray">
	<div class="mui-content enquiry loading" id="vueMain">
	    <div class="enquiry-title">基本信息</div>
	    <form class="mui-input-group">
	        <div class="mui-input-row">
	            <label>您的称呼：</label>
	            <input type="text" class="mui-input-clear" v-model="forms.name" placeholder="">
	        </div>
	        <div class="mui-input-row">
	            <label>公司称呼：</label>
	            <input type="text" class="mui-input-clear" v-model="forms.company" placeholder="">
	        </div>
	        <div class="mui-input-row">
	            <label>联系方式：</label>
	            <input type="text" class="mui-input-clear" v-model="forms.mobile" placeholder="">
	        </div>
	        <div class="mui-input-row vercode inputBox">
	            <label>验证码：</label>
	            <input type="text" class="" placeholder="" v-model="forms.code" />
	            <button type="button" class="bexta-btn bexta-btn-red mui-btn getCode" data-loading-text="获取中">获取验证码</button>
	        </div>
	    </form>
	    		<div class="enquiry-title" v-if="commend_id==2">场地计划</div>
	    		<div class="enquiry-title" v-if="commend_id==3">工作需求</div>
		    <ul class="mui-table-view">
	            <li class="mui-table-view-cell" id="actime">
	                <a class="mui-navigate-right">
	                    <labal>时间：</labal>
	                    <span class="show">{{showTime}}</span>
	                </a>
	            </li>
	            <template v-for="(item,index) in msg.list">
	            		<li class="mui-table-view-cell pops" v-bind:class="'pops'+index" :data-name="item.name" :data-idx="index">
		                <a class="mui-navigate-right " >
		                     {{item.name}}：<span class="show"></span>
		                </a>
		            </li>
	            </template>
	            <li class="mui-input-row" v-if="commend_id==3">
	            		 <label>工作地点：</label>
	            		  <input type="text" class="" placeholder="" v-model="forms.work_place"  />
	            </li>
	        </ul>
	    <div class="enquiry-title">其他要求</div>
	    <form class="mui-input-group">
	        <div class="mui-input-row" style="height: auto !important;">
	            <textarea name="" rows="" v-model="forms.mark" cols="" placeholder="输入其他要求" style="min-height: 120px;"></textarea>
	        </div>
	    </form>
	    
	    <div class="mui-content-padded" style="margin-top: 20px;">
		   		<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block tijiao"   >提交</button>
		   </div>
	    
	</div>
<script src="../js/mui.js"></script>	
<script src="../js/vue.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/bexta.js"></script>
<script>
	var views, apps;
	mui.plusReady(function () {
		views = bexta.getWebview();
		bexta.setStatus(views);
		bexta.ajax(api.consult_select, function(res){
			initVue(res);
		}, {data:{commend_id:views.cid}});
		function initVue(res){
			apps = new Vue({
				el:"#vueMain",
				data:{
					commend_id:views.cid,
					msg:res,
					showTime:'',
					types:[],
					forms:{
						goods_id:views.aid,
						product_id:views.pid,
						name:'',   //姓名
						company:'', //公司
						mobile:'',   //手机
						activity_time:'',   //活动时间
						activity_type:'',  //类型
						work_place:'',  //工作地址
						mark:'',   //其他
						code:''   //验证码
					}
					
				},
				mounted:function(){
					var self = this;
					document.querySelector('.loading').classList.add('loadRun');
					var arr = [];
					mui.each(self.msg.list, function(){
						var people = new mui.PopPicker({layer:1, buttons:CONFIRM});
						var a = [], that = this;
						self.types.push(" ");
						for( var i = 0, len = that.value.length; i < len; i++ ){
							var o = {};
							o['value'] = that.value[i];
							o['text'] = that.value[i];
							a.push(o);
						}
						people.setData(a);
						arr.push(people);
					});
					mui('body').on('tap', '.pops', function(evt){
						mui.each(document.querySelectorAll('input'), function(){
							this.blur();
						});
						var idx = this.getAttribute('data-idx'),that =this,
							names = this.getAttribute('data-name');
						arr[idx].show(function(item){
							that.querySelector('span').innerHTML = item[0].text;
							self.types[idx] = names+"*"+item[0].text;
						});
					});
					
					//验证码
					document.querySelector('.getCode').addEventListener('tap', function(){
						if( check.phone(self.forms.mobile) ){
							var f = mui('.getCode').button('loading');
							bexta.ajax(''+api.send_msg, function(res){
								if( res.isError == 0 ){
									mui.toast(res.msg);
									bexta.countDown(90, function(m){
										if( m <=1  ){
											f.reset();
										}else{
											f.setText(m + '秒');
										}
			
									});
								}
							},{data:{uid:bexta.getStorage(USER).uid, type:4,mobile:apps.forms.mobile}},function(){
								f.reset();
							});
							
						}else{
							mui.toast('手机号有误');
						}
					});
					//日期
					document.querySelector('#actime').addEventListener('tap', function(){
						mui.openWindow({
							url:"calendar.html",
							id:"calendar",
							extras:{
								type:'enquiry'
							},
							show:{autoShow:true,aniShow:'slide-in-bottom'}
						});
					});
					
					//提交
					mui('#vueMain').on('tap', '.tijiao', function(){
						if( apps.types.length < apps.msg.list.length ){
							mui.toast("请填写完整");
							return;
						}
						for( var index = 0, len = self.types.length ; index < len; index++ ){
							if( apps.types[index].trim() == "" ){
								mui.toast("请填写完整");
								return ;
							}
						}
						
						apps.forms.activity_type = apps.types.join(',');
						if( apps.forms.name == '' || apps.forms.company =='' ||apps.forms.activity_time == ''||apps.forms.activity_money==''||apps.forms.code==''){
							mui.toast("请填写完整");
							return ;
						}
						if( !check.phone(apps.forms.mobile) ){
							mui.toast("手机号码错误");
							return ;
						}
						var op = mui.extend({uid:bexta.getStorage(USER).uid}, apps.forms);
						bexta.ajax(api.consult, function(res, msg){
							mui.toast(msg);
							if( !res ){
								mui.back();
							}
						}, {data:op})
					});
					
					
				}
			});
		}
	});
window.addEventListener('toggleDate', function(evt){
	var odate = bexta.getDate(evt.detail.date);
	if(odate.length == 1 ){
		apps.showTime = odate[0].fullDate +' ' + '共1天';
		apps.forms.activity_time = odate[0].fullDate +'至'+ odate[0].fullDate;
	}else{
		apps.showTime = odate[0].fullDate +'至'+ odate[1].fullDate +' ' + '共'+(bexta.dateApart(evt.detail.date)+1)+'天';
		apps.forms.activity_time = odate[0].fullDate +'至'+ odate[1].fullDate;
	}
});
</script>
</body>
</html>
